<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ message }}</h2>
    <ul>
      <li
        v-for="(item, i) in Names"
        :key="'msg-' + i"
        :index="i"
      >{{ item.name }}</li>
    </ul>
    <input
      type="text"
      v-model="doneTodosCount"
    >
    <p>通过computed属性计算</p>
    <div class="mark">
      <div
        v-for="(item, i) in results"
        :key="'mark-'+ i"
      >
        <input
          type="text"
          v-model="item.marks"
        ><span>{{ item.name }}得分{{ item.marks }}</span>
      </div>
      <p>{{ getMarks }}</p>
    </div>
    <vue-pagination
      :cur.sync="currpage"
      :all.sync="totalcount"
      v-on:btn-click="listenPageChange"
    >
      <template slot="search">
        <div><input
            placeholder="这是一个可以选的搜索框"
            type="text"
          ><button @click="search">搜索</button></div>
      </template>
      <span>这是一个默认的slot</span>
      <br>
      <span slot="title">这是一个命名slot</span>
      <!-- <br> -->
      <template slot="list">
        <ul>
          <li
            v-for="(item, index) in results"
            :key="'page-' + index"
          >{{ item.name }}</li>
        </ul>
      </template>
      <!-- 当前版本为vue2.5版本，此写法必须vue2.6版本 -->
      <!-- <template v-slot:todo="{ todo }">
                <span v-if="todo.isComplete">✓</span>
                {{ todo.text }}
            </template> -->
    </vue-pagination>

    <!-- vue传参? 需要继续深入理解 vue .sync和update-->
  </div>
</template>

<script>
import Vue from "vue";
import axios from "../service/common-service/service";
import { mapGetters } from "vuex";
import pagination from "../common/Pagination/pagination";
import es7Api from "../service/common-service/es7-api";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      message: "this is vue",
      Names: [],
      results: [
        {
          name: "English",
          marks: 80
        },
        {
          name: "Math",
          marks: 90
        },
        {
          name: "Chinese",
          marks: 100
        }
      ],
      messageHints: [],
      websock: null,
      currpage: 1,
      totalcount: 2000
    };
  },
  created() {
    //this.initMessage();
    //页面刚进入时开启长连接
    //this.initWebSocket();
    this.count = this.$store.state.count;
    console.log('activated');
    es7Api.cancelActivity().then(res => {
      console.log(res);
    });
  },
  activated() {
      console.log('activated');
  },
  computed: {
    //使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["doneTodosCount"]),
    getMarks: function() {
      let tatol = 0;
      this.results.forEach(mark => {
        tatol += parseInt(mark.marks == "" ? 0 : mark.marks);
      });
      return tatol;
    }
  },
  mounted() {
    // 在实例中获取公共的getters方法返回值
    // console.log(this.$store.getters.doneTodos);
    this.getName();
  },
  destroyed: function() {
    //页面销毁时关闭长连接
  },
  methods: {
    getName: function() {
      var url = "/static/test.json";
      axios.get(url).then(res => {
        let Data = res.list;
        this.Names = Data;
      });
    },
    listenPageChange(pageObj) {
      // 兼容页码点击事件
      console.log(pageObj);
    },
    search() {
        console.log('this is search')
    }
  },
  components: {
    // 引用组件
    VuePagination: pagination
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  background: antiquewhite;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
